const minHeight = 400;
const sourceData = {
  parent: {
    point: {
      x: 20,
      y: 40,
    },
    height: minHeight,
  },
  width: 248,
  height: 36,
  header: {
    height: 48,
  },
}

const targetData = {
  parent: {
    point: {
      x: 380,
      y: 40,
    },
    height: minHeight,
  },
  width: 248,
  height: 36,
  header: {
    height: 48,
  },
}

const sourceParent = {
  x: sourceData.parent.point.x,
  y: sourceData.parent.point.y,
  width: sourceData.width,
  height: sourceData.parent.height,
  // height: souresList.length * sourceData.height + sourceData.header.height + 3,
  zIndex: 1,
  label: '',
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#E8EBF2',
      strokeWidth: 1,
      rx: 3,
      ry: 3,
    },
    label: {
      lineHeight: 20,
      fill: '#9B9FAB',    // 文字颜色
      fontSize: 14,    // 文字大小
    },
  },
}
const sourceHeader = {
  id: 'source-header',
  x: sourceData.parent.point.x,
  y: sourceData.parent.point.y,
  width: sourceData.width,
  height: sourceData.header.height,
  shape: 'group-header',
  data: {
    title: '字段名称'
  }
}

const targetParent = {
  x: targetData.parent.point.x,
  y: targetData.parent.point.y,
  width: targetData.width,
  height: targetData.parent.height,
  // height: souresList.length * sourceData.height + sourceData.header.height + 3,
  zIndex: 1,
  label: '',
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#E8EBF2',
      strokeWidth: 1,
      rx: 3,
      ry: 3,
    },
    label: {
      lineHeight: 20,
      fill: '#9B9FAB',    // 文字颜色
      fontSize: 14,    // 文字大小
    },
  },
}

const targetHeader = {
  id: 'target-header',
  x: targetData.parent.point.x,
  y: targetData.parent.point.y,
  width: targetData.width,
  height: targetData.header.height,
  shape: 'group-header',
  data: {
    title: '绑定维度'
  }
}

const getMaxHeight = (...args: number[]) => {
  let maxHeight = 0;
  args.forEach((n) => {
    maxHeight = n > maxHeight ? n : maxHeight
  })
  return maxHeight
}

const getEdgesData = (souresList: any[], targetList: any[]) => {
 const souresListJson = souresList.reduce((obj, data) => {
   obj[data.tableFieldName] = data;
   return obj
 }, {})
 const edges: any[] = []
 const getEdge = (target: any, name: string) => {
  return {
      source: {
        cell: `s_${souresListJson?.[name]?.id}`,
        port: 'port',
      },
      target: {
        cell: `t_${target.dimensionId}`,
        port: 'port',
      },
      shape: 'group-edge',
      connector: 'smooth',
    }
 }
 targetList.forEach((target) => {
  edges.push(getEdge(target, target.tableFieldColumn))
  edges.push(getEdge(target, target.tableFieldName))
 })
 return edges;
}

export const getJSONData = (souresList: any[], targetList: any[], events: any) => {
  let nodes: any[] = []
  let edges: any[] = []
  const sourceNodeIds: string[] = []
  // attrs: {
  //   fo: {
  //     width: 12,
  //     height: 12,
  //     x: -6,
  //     y: -6,
  //     magnet: 'true',
  //   },
  // },
  const sourceNodes = souresList.map((d, index) => {
    sourceNodeIds.push(d.id)
    return {
      id: `s_${d.id}`,
      x: sourceData.parent.point.x,
      y: sourceData.parent.point.y + sourceData.header.height + index * sourceData.height,
      width: sourceData.width,
      height: sourceData.height,
      shape: 'source-node',
      data: {...d, onBindDimension: events.onBindDimension},
      ports: {
        groups: {
          group1: {
            position: {
              name: 'right',
            },
            attrs: {
              circle: {
                r: 0,
                stroke: '#31d0c6',
                strokeWidth: 1,
                fill: '#fff',
              },
            },
          },
        },
        items: [
          {
            id: 'port',
            group: 'group1',
            args: {
              dx: -4,
            },
          },
        ],
      },
    }
  })
  const targetNodeIds: string[] = []
  const targetNodes = targetList.map((d, index) => {
    targetNodeIds.push(d.id)
    return {
      id: `t_${d.dimensionId}`,
      x: targetData.parent.point.x,
      y: targetData.parent.point.y + targetData.header.height + index * targetData.height,
      width: targetData.width,
      height: targetData.height,
      shape: 'target-node',
      data: {...d, onRevise: events.onRevise, onUnbind: events.onUnbind},
      ports: {
        groups: {
          group1: {
            position: {
              name: 'left',
            },
            attrs: {
              circle: {
                r: 0,
                stroke: '#31d0c6',
                strokeWidth: 1,
                fill: '#fff',
              },
            },
          },
        },
        items: [
          {
            id: 'port',
            group: 'group1',
            args: {
              dx: 4,
            },
          },
        ],
      },
    }
  })
  let sourceParentHeight = souresList.length * sourceData.height + sourceData.header.height + 3
  let targetParentHeight = targetList.length * targetData.height + targetData.header.height + 3
  const maxHeight = getMaxHeight(minHeight, sourceParentHeight, targetParentHeight);
  if(souresList.length == 0){
    sourceParent.label = '暂无数据\n选择数据表'
  }else {
    sourceParent.label = ' '
  }
  sourceParent.height = maxHeight
  // @ts-ignore
  sourceParent.children = ['source-header'].concat(sourceNodeIds)
  nodes.push(sourceParent)
  nodes.push(sourceHeader)
  nodes = nodes.concat(sourceNodes)
  if(targetList.length == 0){
    targetParent.label = '暂无数据\n请从左侧字段进行绑定操作'
  }else {
    targetParent.label = ' '
  }
  targetParent.height = maxHeight
  // @ts-ignore
  targetParent.children = ['target-header'].concat(targetNodeIds)
  nodes.push(targetParent)
  nodes.push(targetHeader)
  nodes = nodes.concat(targetNodes)
  edges = getEdgesData(souresList, targetList);
  // edges.push({
  //   source: {
  //     cell: 's2',
  //     port: 'port',
  //   },
  //   target: {
  //     cell: 't1',
  //     port: 'port',
  //   },
  //   shape: 'group-edge',
  //   connector: 'smooth',
  // })
  return {
    nodes,
    edges,
  }
}
